<template>
	<view>
		<view class="" style="position: sticky; top: 0; z-index: 1000;">
			<image class="image" :src="path" mode="widthFix" :style="{ width:imgWidth+ 'rpx'}">
				<text class="iconfont iconfont1" style="font-size: 20px;" @click="gotoPage">&#x1006d;</text>
				<view class="Image">
					<image class="moneyImage" src="../../../static/images/campusFees/background.png" mode=""></image>
				</view>
				<view class="moneyTitle">校园缴费</view>
				<z-tabs class="banner" activeColor="#f7cb50" :list="list" @change="tabsChange"></z-tabs>
			</image>

		</view>



		<!-- 其他类 -->
		<view class="footer-top" v-show="show==0">
			<view v-for="(slide, i) in otherList" :index="i" :key="i">
				<view class="footerBorder">
					<view class="footer" @click="gotoDetails(slide)">
						<view class="footer-image">
							<image :src="payUrl[0]"></image>
						</view>
						<view class="footer-content">
							<view class="content-title">
								{{slide.payName}}
							</view>

							<view class="money">
								&yen;{{slide.payMoney}}
							</view>
							<text class="iconfont iconfont2" style="font-size: 35px;"
								v-show="slide.remark==0">&#x1006b;</text>
							<text class="iconfont2 line-red" v-show="slide.remark==1"
								style="font-style: italic;">已缴费</text>


						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 书籍类 -->
		<view class="footer-top" v-show="show==1">
			<view v-for="(slide, i) in bookList" :index="i" :key="i">
				<view class="footerBorder">
					<view class="footer" @click="gotoDetails(slide)">
						<view class="footer-image">
							<image :src="payUrl[1]"></image>
						</view>
						<view class="footer-content">
							<view class="content-title">
								{{slide.payName}}
							</view>
							<!-- <view class="date" :date="slide.endTime" format="MM/dd">
									截至日期:{{happenTimeFun(slide.endTime)}}
								</view> -->
							<view class="money">
								&yen;{{slide.payMoney}}
							</view>
							<text class="iconfont iconfont2" style="font-size: 35px;"
								v-show="slide.remark==0">&#x1006b;</text>
							<text class="iconfont2 line-red" v-show="slide.remark==1"
								style="font-style: italic;">已缴费</text>

						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 牛奶类 -->
		<view class="footer-top" v-show="show==2">
			<view v-for="(slide, i) in MilkList" :index="i" :key="i">
				<view class="footerBorder">
					<view class="footer" @click="gotoDetails(slide)">
						<view class="footer-image">
							<image :src="payUrl[2]"></image>
						</view>
						<view class="footer-content">
							<view class="content-title">
								{{slide.payName}}
							</view>
							<!-- <view class="date" :date="slide.endTime" format="MM/dd">
									截至日期:{{happenTimeFun(slide.endTime)}}
								</view> -->
							<view class="money">
								&yen;{{slide.payMoney}}
							</view>
							<text class="iconfont iconfont2" style="font-size: 35px;"
								v-show="slide.remark==0">&#x1006b;</text>
							<text class="iconfont2 line-red" v-show="slide.remark==1"
								style="font-style: italic;">已缴费</text>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		listPay
	} from "@/api/pay/pay.js"
	import {
		getInfo
	} from "@/api/pd/pd.js"
	export default {
		onShow() {
			if (this.pageStatus == false) {
				if (this.show == 0) {
					this.otherQueryParams.pageSize = this.otherQueryParams.pageNum * this.otherQueryParams.pageSize
					this.otherQueryParams.pageNum = 1

					listPay(this.otherQueryParams).then((res) => {
						for (let i = 0; i < res.rows.length; i++) {
							for (let j = 0; j < this.otherList.length; j++) {
								if (res.rows[i].payId == this.otherList[j].payId) {
									this.otherList[j].remark = res.rows[i].remark
								}
							}
						}
					})
				} else if (this.show == 1) {
					this.bookQueryParams.pageSize = this.bookQueryParams.pageNum * this.bookQueryParams.pageSize
					this.bookQueryParams.pageNum = 1
					listPay(this.bookQueryParams).then((res) => {
						for (let i = 0; i < res.rows.length; i++) {
							for (let j = 0; j < this.bookList.length; j++) {
								if (res.rows[i].payId == this.bookList[j].payId) {
									this.bookList[j].remark = res.rows[i].remark
								}
							}
						}
					})

				} else if (this.show == 2) {
					this.MilkQueryParams.pageSize = this.MilkQueryParams.pageNum * this.MilkQueryParams.pageSize
					this.MilkQueryParams.pageNum = 1
					listPay(this.MilkQueryParams).then((res) => {
						for (let i = 0; i < res.rows.length; i++) {
							for (let j = 0; j < this.MilkList.length; j++) {
								if (res.rows[i].payId == this.MilkList[j].payId) {
									this.MilkList[j].remark = res.rows[i].remark
								}
							}
						}
					})
				}
				this.pageStatus = true
			}

		},
		onLoad(option) {
			this.otherQueryParams.deptId = JSON.parse(decodeURIComponent(option.classId));
			this.bookQueryParams.deptId = JSON.parse(decodeURIComponent(option.classId));
			this.MilkQueryParams.deptId = JSON.parse(decodeURIComponent(option.classId));
			this.listPay()

			uni.getImageInfo({
				src: this.path,
				success: function(image) {
					this.imgWidth = image.width;
					this.imgHeight = image.height;
				}
			})

		},
		onReachBottom() { //触底事件
			if (this.show == 0) {
				if (this.otherQueryParams.pageNum * this.otherQueryParams.pageSize >= this.otherTotal) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (this.otherQueryParams.pageNum <= this.otherQueryParams.pageNum - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.otherQueryParams.pageNum++

						this.listPay()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			} else if (this.show == 1) {
				if (this.bookQueryParams.pageNum * this.bookQueryParams.pageSize >= this.bookTotal) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (this.bookQueryParams.pageNum <= this.bookQueryParams.pageNum - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.bookQueryParams.pageNum++

						listPay(this.bookQueryParams).then((res) => {
							this.bookList = [...this.bookList, ...res.rows];
							this.bookTotal = res.total;
						})
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			} else if (this.show == 2) {
				if (this.MilkQueryParams.pageNum * this.MilkQueryParams.pageSize >= this.MilkTotal) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (this.MilkQueryParams.pageNum <= this.MilkQueryParams.pageNum - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.MilkQueryParams.pageNum++

						listPay(this.MilkQueryParams).then((res) => {
							this.MilkList = [...this.MilkList, ...res.rows];
							this.MilkTotal = res.total;
						})
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			}
		},
		data() {
			return {
				pageStatus: true,
				imgWidth: '',
				imgHeight: '',
				path: "../../../static/images/campusFees/money.jpg",
				list: ["其他类", "书籍类", "牛奶类"],
				show: 0,
				otherList: [],
				otherTotal: null,
				bookList: [],
				bookTotal: null,
				MilkList: [],
				MilkTotal: null,
				payUrl: ["../../../static/images/campusFees/other.png", "../../../static/images/campusFees/book.png",
					"../../../static/images/campusFees/milk.png"
				],
				otherQueryParams: {
					pageNum: 1,
					pageSize: 7,
					deptId: undefined,
					payType: 2,
					remark: "我要查缴费状态"
				},
				bookQueryParams: {
					pageNum: 1,
					pageSize: 7,
					deptId: undefined,
					payType: 0,
					remark: "我要查缴费状态"
				},
				MilkQueryParams: {
					pageNum: 1,
					pageSize: 7,
					deptId: undefined,
					payType: 1,
					remark: "我要查缴费状态"
				},
			}
		},
		methods: {
			listPay() {
				listPay(this.otherQueryParams).then((res) => {
					// console.log(res);
					this.otherList = [...this.otherList, ...res.rows];
					this.otherTotal = res.total;
				})
			},
			gotoPage() {
				uni.switchTab({
					url: '/pages/home/index'
				});
			},
			tabsChange(index) {
				this.show = index
				if (index == 1 && this.bookList.length == 0) {
					listPay(this.bookQueryParams).then((res) => {
						// console.log(res);
						this.bookList = [...this.bookList, ...res.rows];
						this.bookTotal = res.total;
					})
				} else if (index == 2 && this.MilkList.length == 0) {
					listPay(this.MilkQueryParams).then((res) => {
						// console.log(res);
						this.MilkList = [...this.MilkList, ...res.rows];
						this.MilkTotal = res.total;
					})
				}

			},
			//详情页
			gotoDetails(event) {
				getInfo(event.payId).then((res) => {
					this.pageStatus = false
					uni.navigateTo({
						url: '/pages/home/campusFees-details/index?item=' + encodeURIComponent(JSON
							.stringify(event)) + "&&status=" + encodeURIComponent(JSON
							.stringify(res.data.status)) + "&&type=1"
					})
				})



			},
		},

		computed: {
			happenTimeFun() { //时间戳数据处理
				return function(e) {
					let arr = [];
					arr = e.split("-");
					let month = "";
					for (let i = 0; i < arr[1].length; i++) {
						if (i == 0) {
							if (arr[1][i] != "0") {
								month += arr[1][i];
							}
						} else {
							month += arr[1][i];
						}
					}
					month += "月"
					let oldDay = arr[2].split(" ")[0];
					let newDay = "";
					for (let i = 0; i < oldDay.length; i++) {
						if (i == 0) {
							if (oldDay[i] != "0") {
								newDay += oldDay[i];
							}
						} else {
							newDay += oldDay[i];
						}

					}
					newDay += "日"
					return arr[0] + "年" + month + newDay
				}

			}
		}

	}
</script>

<style lang="scss">
	.image {
		width: 100%; // 设置最大宽度，超出按自身宽高比例缩放
		display: block;

	}

	.banner {
		z-index: 2000;
		border-bottom: 1rpx solid #c8c8c8;
	}

	.footer {

		margin: 30rpx auto;
		margin-left: 10rpx;
		display: flex;
		justify-content: space-between;

		.footer-image {
			display: block;
			width: 180rpx;
			height: 140rpx;
			margin-right: 20rpx;

			image {
				width: 180rpx;
				height: 140rpx;
			}
		}

		.footer-content {
			display: flex;
			flex-direction: column;
			// width: 529rpx;
			margin-right: 380rpx;
		}

		.iconfont2 {
			position: absolute;
			bottom: 25rpx;
			right: 10rpx;
		}
	}

	.content-title {
		color: black;
		// width: 529rpx;
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.date {
		padding: 10rpx 0 10rpx 0;
	}

	.money {
		padding: 50rpx 0 10rpx 0;
		color: #ed5b3f;
	}

	.footerBorder {
		position: relative;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		border-bottom: 1px #c8c8c8 solid;
	}



	.iconfont1 {
		position: absolute;
		top: 20rpx;
		left: 10rpx;
	}

	.Image {
		width: 180rpx;
		height: 180rpx;
		top: 180rpx;
		left: 30rpx;
		position: absolute;

		.moneyImage {
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
		}
	}

	.moneyTitle {
		color: white;
		top: 290rpx;
		font-size: 40rpx;
		left: 230rpx;
		position: absolute;
	}
</style>
